<template>
  <div class="menu" >
	  <el-tabs style="padding:10px;height: 110px;" class="tabs" v-model="activeTabName">
	  		<el-tab-pane v-for="item in tableData">
                <template #label ><el-button :icon="riyong"  @click="getCategoryId(item)">{{item.name}}</el-button></template>			
                <div class="tab-btn">
                <el-tabs v-model="activeTabName2">
                    <el-tab-pane ></el-tab-pane>
                    <el-tab-pane v-for="items in item.children" ><template #label ><el-button @click="getCategoryId(items)" size="large"><span >{{items.name}}</span></el-button></template></el-tab-pane>
                </el-tabs>
            </div>
	  		</el-tab-pane>
	  </el-tabs> 	
  </div>
</template>

<script setup>

import riyong from '@/components/img/goods/riyong'
import { get } from '@/plugins/axios'
import { ref,reactive } from 'vue'
import router from '@/router';
import { useRoute } from 'vue-router';
const activeTabName= ''
const activeTabName2= ''
const tableData = ref()
const params = reactive({
})

getTableData2()
function getTableData2() {
	get("/category/list", params, content => {
			tableData.value = content 
				console.dir(content)
		})
	console.dir(tableData)
// router.push({
// 		path:'/goods',
// 		query:{categoryId:-1}
// 	})
}


function getCategoryId(items){
	// params.categoryId=items.id
	// console.dir(params.categoryId)
	router.push({
		path:'/goods',
		query:{categoryId:items.id}
	})
}

</script>

<style scoped lang="scss">
.menu{
	background-color: #fff5e9;
	border-radius: 8px;
	margin-bottom: 10px;
    .el-button{
        height: 90%;
        background-color: #fff5e9;
        border: 0;
      //color: #5de876;
		color: currentColor;
    }
  :hover{
    color: #f59115;
  }
}
</style>